<template>
    <el-form label-width="100px">
        <!-- SPU名称 -->
        <el-form-item label="SPU 名称">
            <span>{{spuName}}</span>
        </el-form-item> 
        <!-- SKU名称 -->
        <el-form-item label="SKU 名称">
            <el-input type="text" placeholder="请输入SKU名称" v-model="skuInfo.skuName"></el-input>
        </el-form-item> 
        <!-- 价格（元）-->
        <el-form-item label="价格（元）">
            <el-input type="number" placeholder="请输入价格" v-model="skuInfo.price"></el-input>
        </el-form-item> 
        <!-- 重量（千克）-->
        <el-form-item label="重量（千克）">
            <el-input type="number" placeholder="请输入重量" v-model="skuInfo.weight"></el-input>
        </el-form-item> 
        <!-- 规格描述 -->
        <el-form-item label="规格描述">
            <el-input type="textarea" placeholder="请输入规格描述" rows="4" value="很好看"></el-input>
        </el-form-item> 
        <!-- 平台属性 -->
        <el-form-item label="平台属性">
            <el-form  inline label-width="100px">           
            <!-- 第一个平台属性 -->
            <el-form-item label="适用人群" style="margin-bottom:10px">
                <el-select value="1" placeholder="请选择">
                 <el-option label="年轻人"  value="1"></el-option>
                 <el-option label="老年人"  value="2"></el-option>
                </el-select>               
            </el-form-item>
            <!-- 第二个平台属性 -->
            <el-form-item label="风格">
                <el-select value="2" placeholder="请选择">
                 <el-option label="休闲风"  value="1"></el-option>
                 <el-option label="韩系风"  value="2"></el-option>
                </el-select>                 
            </el-form-item>
            </el-form>
        </el-form-item> 
        <!-- 销售属性 -->
        <el-form-item label="销售属性">
            <el-form inline label-width="100px">           
              <!-- 第一个平台属性 -->
            <el-form-item label="适用人群">
                <el-select value="1" placeholder="请选择">
                 <el-option label="年轻人"  value="1"></el-option>
                 <el-option label="老年人"  value="2"></el-option>
                </el-select>               
            </el-form-item>
            <!-- 第二个平台属性 -->
            <el-form-item label="风格">
                <el-select value="2" placeholder="请选择">
                 <el-option label="休闲风"  value="1"></el-option>
                 <el-option label="韩系风"  value="2"></el-option>
                </el-select>                 
            </el-form-item>
            </el-form>
        </el-form-item> 
        <!-- 图片列表 -->
        <el-form-item label="图片列表">
            <el-table :data="[]" style="width: 100%" @selection-change="handleSelectionChange" border>
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="图片"> 
                    <template slot-scope="{row,$index}">
                        <img src="" alt="">
                    </template>
                </el-table-column>
                <el-table-column label="名称"> </el-table-column>
                <el-table-column label="操作"> 
                    <template slot-scope="{row,$index}">
                        <el-button type="primary">设为默认</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item> 
        <!-- 两个按钮 -->
        <el-form-item >
            <el-button type="primary">保存</el-button>
            <el-button type="primary" @click="back">取消</el-button>
        </el-form-item>     
    </el-form>      
</template>

<script>
export default {
  name: 'SkuForm',
  data(){
   return {
      skuInfo :{
          skuName:'',//sku名称
          price:'',//价格
          weight:'',//重量
          skuDesc:'',//描述信息
          skuAttrValueList:[],//平台属性数组数据
          skuSaleAttrValueList:[],//销售属性数组
          skuImageList:[],//图片列表数据
          createTime:'',//当前的skuInfo对象添加（创建）时间
          isSale:0,//是上架的标识（添加sku之后，该sku是否会在前台页面中直接展示）
          skudDefaultImg:'string',//设置默认默认的图片的地址（前台电商项目中/search路由对应的界面中，商品列表中显示默认的图片）
          spuId:0,//skuInfo对象最终向哪个spuInfo对象中添加。需要spuId
          tmId:0,//当前的sku也是属于某个人
          category3Id:0,//三级分类id
      },
      spuName:'',//spu对象的名字
      catrgory1Id:'',//一级分类id
      category2Id:'',//二级分类id
      attrList:[],//平台属性数组
      saleAttrList:'',//销售属性数组
      imageList:[],//图片列表数组
   }
  },
  methods: {
      back(){
          this.$emit('cancel')
      },
      //多选图片的表格所需要的事件回调函数
      handleSelectionChange(){
          //this.multipleSelection = val;
      },
      //为了添加skud对象初始化数据回调
      initAddData(spuInfo){
          this.spuInfo = spuInfo.spuName //保存spu对象的名字
          this.skuInfo.spuId=spuInfo.Id//保存spu对象id
          this.skuInfo.tmId = spuInfo.tmId//保存spu对象的品牌
          //保存一级，二级，三级分类的id
          this.catrgory1Id =  spuInfo.catrgory1Id
          this.catrgory2Id =  spuInfo.catrgory2Id
          this.skuInfo.catrgory3Id =  spuInfo.catrgory3Id
          //调用数据方法，获取平台属性数据/销售属性数据/图片列表数据
          this.getInitData()
      },
      //初始化数据的方法（平台属性数据/销售属性数据/图片利润表数据）
      async getInitData(){
          //解构数据
          const {
              category1Id,category2Id,skuInfo:{category3Id,spuId} = this
          }
          //获取平台属性
          const promise1 = await this.$API.attr.getAttrInfoList
          (category1Id,category2Id,category3Id)
          const promise2 = await this.$API.sku.getSpuSaleAttrlist(spuId)
          //获取图片列表数据
          const promise3 = await this.$API.sku.getSpuImageList(spuId)
          //统一出路promise
          const result = await Promise.all([promise1,promise2,promise3])
          console.log(result)
          //存储平台属性
          this.arrtList = result[0].data
          //存储销售属性
          this.saleAttrList = result[1].data
           //存储图片数据
          this.imageList = result[2].data
          this.imageList = this.imageList
      }
  },
}
</script>

<style>
</style>